<template>
    <div>
        <el-table
                :data="tableDataFormat"
                style="width: 100%;height: 100%;"
                :row-style="{ height:'0' }"
                :cell-style="{ padding:'5px' }"
                max-height="400px"
                empty-text=" "
                stripe
                border
                highlight-current-row
                :header-cell-style="{ background: '#f0f9eb' }">
            <el-table-column v-if="colnames != null" label="ID" prop="id" width="60px" align="center"
                             header-align="center" type="index"></el-table-column>
            <template v-for="(colname, index) in colnames">
                <el-table-column :label="colname" :prop="colname" :index="index" align="center" header-align="center"
                                 max-width="10" sortable></el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "dataPreviewTable",
        data() {
            return {}
        },
        props: {
            tableInData: Array,
            // tableData: Array
        },
        computed: {
            colnames() {//获取列名
                if (this.tableInData == null || this.tableInData.length === 0) {
                    return null;
                } else {
                    for (let col of Object.keys(this.tableInData[0])) {
                        if (col.toLowerCase().indexOf("pk") !== -1 && col.toLowerCase().indexOf("id") !== -1) {
                            delete this.tableInData[0][col];
                        }
                    }
                }
                let col = Object.keys(this.tableInData[0]);
                // if(col[0].indexOf('col')!==-1) {
                //     for (let i = 0; i < col.length - 1; i++) {
                //         //排序
                //         for (let j = 0; j < col.length - 1 - i; j++) {
                //             if (parseInt(col[j].charAt(col[j].length - 1)) > parseInt(col[j + 1].charAt(col[j + 1].length - 1))) {
                //                 let temp = col[j];
                //                 col[j] = col[j + 1];
                //                 col[j + 1] = temp;
                //             }
                //         }
                //     }
                // }
                return col;
                // return Object.keys(this.tableInData[0]);
            },
            tableDataFormat() {//数据处理——时间格式化
                if (this.tableInData == null || this.tableInData.length === 0)
                    return null;
                let colnames = Object.keys(this.tableInData[0]);
                for (let col = 0; col < colnames.length; col++) {
                    if (colnames[col].toLowerCase().indexOf('time') !== -1) {
                        for (let row = 0; row < this.tableInData.length; row++) {
                            // if ((this.tableInData[row][colnames[col]] + '').indexOf('-') === -1) {
                            //     this.tableInData[row][colnames[col]] = this.$date.dateFormat(parseInt(this.tableInData[row][colnames[col]]))
                            // }
                        }
                    }
                }
                return this.tableInData;
            },
        },
        methods: {
            tableRowClassName({row, rowIndex}) {//表格颜色设置，当前为轮询双色
                if (rowIndex % 2 == 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
            }
        },
        mounted() {

        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table--scrollable-y .el-table__body-wrapper {
        overflow-y: scroll;
    }

</style>

